// !#1 引入 React 核心包
import React from 'react'
// !#2 负责渲染的包（虚拟 DOM 转真实 DOM 并渲染）
import ReactDOM from 'react-dom/client'

// !#3 创建一个虚拟 DOM
// 标签名、属性列表、第三个及以后的所有参数都表示内容
const wrapEle = React.createElement(
  'div',
  { className: 'wrap' },
  React.createElement(
    'ul',
    null,
    React.createElement('li', null, 'React'),
    React.createElement('li', null, 'Vue'),
    React.createElement('li', null, 'Angular')
  )
)

// !#4 把虚拟 DOM 渲染到页面
// 渲染到哪儿、渲染谁
ReactDOM.createRoot(document.querySelector('#root')).render(wrapEle)
